<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.父传子：父组件通过props属性向子组件传递数据(props属性是写在子组件对象中)
        props的值有两种方法：
        方法一：取值是字符串数组，数组中的字符串就是传递时数据的名称
        方法二：取值是对象，对象中可以设置传递时的类型，也可以设置默认值等
     -->
     <div id="app">
        <!-- 3.使用子组件,动态绑定父组件传过来的数据 -->
        <child-cpn :message="message" :num="num" :count="count" :username="username" :list="list" :score="score"></child-cpn>

     </div>
     <script src="./vue.js"></script>
     <!-- 1.创建子组件模板 -->
     <template id="child">
        <div>
            <li>{{message}}----{{num}}</li>
            <li>{{count}}</li>
            <li>{{username}}</li>
            <li v-for="item in list">{{item}}</li>
            <li>{{score}}</li>
        </div>
     </template>
     <script>
        let app=new Vue({
            el:"#app",
            data:{
                message:"hello world",
                num:"100",
                count:88,
                username:undefined,
                list:undefined,
                score:48
            },
            // 2.注册子组件
            components:{
                "child-cpn":{
                    template:"#child",
                    // 方法一：取值是字符串数组，数组中的字符串就是传递时数据的名称
                    // props:["message","num"]

                    // 方法二：取值是对象，对象中可以设置传递时的类型，也可以设置默认值等
                    props:{
                        // 基础类型验证(null可以匹配任意类型)
                        // 支持验证的数据类型有：String\Number\Boolean\Array\Object\Date\Function\Symbol
                        message:String,
                        num:null,

                        // 验证多种可能的数据类型
                        count:{
                            // type:[String,Number],//验证多种可能的数据类型
                            type:null,
                            required:true //必须传值，没有传就会报错
                        },

                        // 带默认值的字符串
                        username:{
                            type:String,
                            default:"admin"//默认值，当没有传值的时候就会使用默认值
                        },

                        // 带默认值的数组
                        list:{
                            type:Array,//
                            // 对象或者数组默认值必须从函数中获取，因此default必须是一个函数方法
                            default:function(){
                                return ["111","222","333"]
                            }
                        },

                        // 自定义验证函数
                        score:{
                            // 验证器：
                            validator:function(value){
                                // value:形参，表示父组件传过来的值
                                if(value>60){
                                    return true;
                                }

                            }
                        }




                        
                    }

                }
            }
        })
     </script>
</body>
</html>